<template>
  <div>
    <h1>购物车</h1>
    <ul>
      <li v-for="item in shopCarList" :key="item.id">
        {{ item.name }}--{{ item.msg }}--单价:{{ item.price }}--小计:${{
          item.price * item.num
        }}--数量: {{ item.num }}<button @click="reduceChange(item)">-</button>
        <input type="text" v-model="item.num" /><button
          @click="addChange(item)"
        >
          +
        </button>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState("shopCar", ["shopCarList"]),
  },
  methods: {
    ...mapMutations("goods", ["reduceGoodsList", "addGoodsList"]),
    ...mapMutations("shopCar", ["addShopCarList", "reduceShopCarList"]),
    addChange(item) {
      this.reduceGoodsList(item);
      this.addShopCarList(item);
    },
    reduceChange(item) {
      this.addGoodsList(item);
      this.reduceShopCarList(item);
    },
  },
};
</script>
